<template>
  <div class="items">
    <ProductItem :product="ticket" :hasDel="false" :hasPrice="false" type="ticket"/>
    <div class="btn-group">
      <button class="handleBtn blue" @click="use">使用</button>
      <button class="handleBtn red" @click="send">赠送</button>
    </div>

    <!-- 使用水票弹窗 -->
    <UserTicketModal
      :ticket="ticket"
      v-if="showTicketModal"
      @close="handleCloseModal"
      @handleSubmit="handleSubmit"
    />
  </div>
</template>

<script>
import ProductItem from "@/components/product/ProductItem";
import UserTicketModal from "@/components/myticket/UserTicketModal";
export default {
  props: ["ticket"],
  data() {
    return {
      showTicketModal: false
    };
  },
  components: {
    ProductItem,
    UserTicketModal
  },
  methods: {
    use() {
      let num = this.ticket.number;
      if (num == 1) {
        // this.$toast("1张水票，直接使用");
        this.$routerPush(this, `/pages/address/Index?mode=select&productId=${this.ticket.product_id}&number=1`);
      } else {
        this.showTicketModal = true;
      }
    },
    send() {
      // 点击赠送
      this.$toast("点击赠送");
    },
    handleCloseModal() {
      this.showTicketModal = false;
    },
    handleSubmit(num) {
      // 确定使用水票
      this.$routerPush(this, `/pages/address/Index?mode=select&productId=${this.ticket.product_id}&number=${num}`);
    }
  }
};
</script>

<style lang="less" scoped>
.items {
  width: 94vw;
  background: #fff;
  margin: 2vw auto;
  .btn-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4vw 2vw;
    button {
      margin-right: 3vw;
    }
  }
}
</style>